import * as React from "react"
import { css } from "@emotion/core"
import { ScaleLoader } from "react-spinners"

// https://www.npmjs.com/package/react-spinners
// for ScaleLoader from "react-spinners"
// const override = css`
// 	width: 50px;
// 	height: 50px;
// 	position: fixed;
// 	top: -631px;
// 	right: 0px;
// 	bottom: 0;
// 	left: 30px;
// 	margin: auto;
// `
const override = css`
	width: 50px;
	height: 50px;
	position: relative;
	top: 3px;
	right: 0px;
	bottom: 0;
	left: -30px;
`
interface ILoader {
	loading: boolean;
}

export const Loader: React.FC<ILoader> = props => {
	return (
		<ScaleLoader
			css={override}
			height={20}
			width={3}
			radius={10}
			color={"lightgreen"}
			loading={props.loading}
		/>
	)
}
